<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>灵犀列表</title>
    <script src="javascript/jquery.min.js"></script>
    <script src="javascript/function.js"></script>
    <link rel="stylesheet" href="stylesheet/style_v1.1.css">
    <link rel="stylesheet" href="stylesheet/style.css">
</head>
<body>
<div class="header-title">
    <a href="javascript:void(0);" class="fanhui">
        <img src="image/tick.png" alt="">
    </a>
    <p>灵犀列表</p>
</div>
<div class="tab-class">
<ul>
    <li style="width: 33.33%;">
        <a href="javascript:void(0);" onclick="queryMyCliffordList('1');"  class="ac">进行中</a>
    </li>
    <li style="width: 33.33%;">
        <a href="javascript:void(0);" onclick="queryMyCliffordList('2');">已完成</a>
    </li>
    <li style="width: 33.33%;">
        <a href="javascript:void(0);" onclick="queryMyCliffordList('3');">已兑换</a>
    </li>
</ul>
</div>
<div class="con padding-top100 padding-bottom50 padding-lr5" id="myDetailShow">
</div>
  <%@ include file="footer.jsp"%>
    <script>
        $(function(){
        	  $('.tab-class').find('li').on('click',function(){
                  $('.tab-class a').removeClass('ac');
                   $(this).find('a').addClass('ac');
               });
        	queryMyCliffordList("1");
        });
        function queryMyCliffordList(status){
        	var params = "parms.openId=" + "1";
        	params += "&parms.status=" + status;
        	$.ajax({
        				type : 'post',
        				url : 'cliffordAction!queryMyCliffordList.action',
        				async : false,
       					data : params, // 传给action的参数
        				success : function(data) {
        					if (data.result == 1) {
        						if (data.resultData.size == '0') {
        							document.getElementById("myDetailShow").innerHTML="";
        							if(status=='1'){
        								alert("您还没有灵犀过哦~");
        							}else if(status=='2'){
        								alert("您还没有完成过灵犀哦~");
        							}else{
        								alert("未查询到符合条件的记录");
        							}
        							
        						} else {
        							var list = data.resultData.datalist;
        							var html = "";
        							for ( var i = 0; i < list.length; i++) {
        								html += '  <div class="list-qifu">';
        								html += '  <a href="forwardPageParam_cliffordUserList.action?parms.config='+list[i].zjfClifford.goodsId+'_'+list[i].zjfClifford.clifford_Id+'_2">';
        								html += '  <div class="list-img">';
        								html += '   <img src="'+list[i].zjfGood.goodsMainPhoto+'" alt="">';
        								html += '    </div>';
        								html += '   <div class="list-info">';
        								html += '  <p class="list-name">'+list[i].zjfClifford.goodsName+'</p>';
        								html += ' <span class="qifu-rs">灵犀人数：<b>'+(list[i].zjfClifford.cliffordAllNumber-list[i].zjfClifford.cliffordNeedNumber)+'</b>/<b>'+list[i].zjfClifford.cliffordAllNumber+'</b></span>';
        								html += '        <span class="qifu-rss">'+list[i].zjfClifford.cliffordStartedTime+'</span>';
        								html += '      </div>';
        								html += '   </a>';
        								html += '    </div>';
        							}
        							document.getElementById("myDetailShow").innerHTML = html;
        						}
        					} else {
        						document.getElementById("myDetailShow").innerHTML="";
        						alert(data.msg);
        					}
        				}
        			});
        }
    </script>
</body>
</html>